<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:de="urn:oasis:names:tc:emergency:EDXL:DE:1.0" xmlns:sr="http://icnet.mitre.org/mEXL/SitRep/" xmlns:xnl="urn:oasis:names:tc:ciq:xnl:3" xmlns:cot="urn:cot:mitre:org" xmlns:csharp="http://csharp.org">
	<xsl:import href="get-address.xsl"/>
  <xsl:import href="format-date.xsl"/>
	<xsl:template match="*">
		<html>
			<head>
				<style>

		body {
			font-family: sans-serif;
		}
								h1, h2, h3, h4, p {
        padding: 0;
        margin: 0;
        text-align: center;
      }
      
      #wrapper {
        border-top: 1px solid DimGray;
        border-left: 1px solid DimGray;
        border-right: 1px solid DimGray;
        min-width: 310px
      }
      
      #title, #address, #sender-info, #observation, #images, #point {
        border-bottom: 1px solid DimGray;
        padding: 0.25em;
      }
      
      #title {
        color: white;
        background-color: black;
        text-align: center;
      }
      
      #title img {
		float: left;
		max-height: 37px;
      }
      
      #title.mayday {
		  background-color: #dd0000;
      }
      
      #address {
        text-align: center;
      }
      
      #address span {
		  font-weight: bold;
      }
      
      #lat-long {
		  font-weight: normal;
		  font-size: 0.8em;
      }
      
      #header h1 {
        display: inline;
        padding: 0 0.5em 0 0;
      }
      
      #images {
        padding: 0.25em;
      }
      
      .image {
		  text-align: center;
        padding: 0 0.5em 0;

        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      
      .image img {
              max-width: 475px;
      }
      
      .caption {
        text-align: center;
      }
      
      #sender-info {
        text-align: center;
      }
      
      
      #observation-data, #point-data {
        padding: 0 0 0 0.5em;
        min-width:100%;
        max-width:100%;
        vertical-align:top
      }
      
      #observation-data th, #point-data th {
        text-align: left;
        width: 125px;
        vertical-align:top
      }
      
      #observation-data table, #point-data table {
      margin-left:auto;		margin-right:auto;
      }
      
      .clearing {
        clear: both;
      }
				</style>
			</head>
			<body>
				<div id="wrapper" style="font-family: sans-serif; border-top: 1px solid DimGray; border-left: 1px solid DimGray; border-right: 1px solid DimGray; min-width: 310px;">
					<div id="header">
						<div id="title" style="border-bottom: 1px solid DimGray; padding: 0.25em; color: white; background-color: black; text-align: center;">
							<h1 style="padding: 0; margin: 0; text-align: center;">
								Field Observation - <xsl:value-of select="SituationObservation/ObservationType"/>
							</h1>
						</div>
						<div id="address" style="border-bottom: 1px solid DimGray; padding: 0.25em;">Near <span>
								<xsl:variable name="googleAddress"><xsl:value-of select="csharp:GetAddressFromLatLon(
										substring-before(ObservationLocation,' '), 
										substring-after(ObservationLocation,' '))" />
								</xsl:variable>
									<xsl:if test="$googleAddress != ''">
										<xsl:value-of select="$googleAddress"/>
									</xsl:if>
								<div id="lat-long"><xsl:value-of select="substring-before(ObservationLocation,' ')"/>, <xsl:value-of select="substring-after(ObservationLocation,' ')"/></div>
							</span>
						</div>
					</div>
					<div id="content">
						<div id="sender-info" style="border-bottom: 1px solid DimGray; padding: 0.25em;">
							<p style="padding: 0; margin: 0; text-align: center;">
								<strong>Sent by </strong>
								<xsl:value-of select="PreparedBy/xnl:PersonName/xnl:NameElement"/>
								<strong> on </strong>
                <xsl:value-of select="csharp:FormatDateTime(PreparedDateTime)"/>
							</p>
						</div>
						
						

							<div id="observation" style="border-bottom: 1px solid DimGray; padding: 0.25em;">
								<h3 style="padding: 0; margin: 0; text-align: center;">Field Observation</h3>
								<div id="observation-data">
									<table>
										<tr>
											<th>Type:</th>
											<td>
												<xsl:value-of select="SituationObservation/ObservationType"/>
											</td>
										</tr>
										<tr>
											<th>Remarks:</th>
											<td>
												<xsl:value-of select="SituationObservation/ObservationText"/>
											</td>
										</tr>
										<xsl:if test="SituationObservation/ImmediateNeeds != ''">
											<tr>
												<th>Immediate Needs:</th>
												<td><xsl:value-of select="SituationObservation/ImmediateNeeds"/></td>
											</tr>
										</xsl:if>
										<xsl:if test="Certainty != ''">
											<tr>
												<th>Certainty:</th>
												<td><xsl:value-of select="Certainty"/></td>
											</tr>
										</xsl:if>
										<xsl:if test="Urgency != ''">
											<tr>
												<th>Urgency:</th>
												<td><xsl:value-of select="Urgency"/></td>
											</tr>
										</xsl:if>
									</table>
								</div>
							</div>
						
					</div>
				</div>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>